<template>
  <div>
    <!-- <button @click="addCount">+1</button> -->
    <!-- <button @click="addCount(100)">+100</button> -->

    <!-- <button @click="AddAsyncCount">Async +</button> -->
    <!-- <button @click="getAsyncCount(10000)">(辅助)Async + </button> -->

    <!-- 原始方式 -$store -->
    <div> 原始方式 :{{ $store.getters.filterList }}</div>
    <!-- 辅助函数 - mapGetters -->
    <div>辅助函数 :{{ filterList }}</div>
  </div>
</template>

<script>
import { mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  computed: { ...mapGetters(['filterList']) },
  methods: {
    // 1: 原始形式
    // addCount () {
    //   // commit(mutation名称, 载荷)
    //   this.$store.commit("addCount", 10)  // 提交mutations
    // },

    // 2:辅助函数 - mapMutations
    ...mapMutations(['addCount']),
    ...mapActions(['getAsyncCount']),

    // AddAsyncCount () {
    //   // 原始形式 调用action
    //   this.$store.dispatch('getAsyncCount', 1000)
    // },
  }
}
</script>
